// 成绩渲染函数 (封装)
function renderScore() {
    axios({
        url: '/score/list',
    }).then(({
        data: res
    }) => {
        //成功回调
        if (res.code == 0) {
            // console.log(res.data)
            //响应数据是 '对象包对象'  渲染做成tr标签
            //(1) 自定义一个数组
            let arr = []
            for (let k in res.data) {
                // k是下标
                // res.data[k] k下标的值
                arr.push(
                    `
                    <tr>
                        <th scope="row">${k}</th>
                        <td>${res.data[k].name}</td>
                        <td data-id="${k}" data-batch="1" class="score">${res.data[k].score[0]}</td>
                        <td data-id="${k}" data-batch="2" class="score">${res.data[k].score[1]}</td>
                        <td data-id="${k}" data-batch="3" class="score">${res.data[k].score[2]}</td>
                        <td data-id="${k}" data-batch="4" class="score">${res.data[k].score[3]}</td>
                        <td data-id="${k}" data-batch="5" class="score">${res.data[k].score[4]}</td>
                    </tr>
                    `
                )
            }
            document.querySelector('tbody').innerHTML = arr.join('')
        }
    })
}
// 函数调用 才会执行
renderScore()

// 需求2 : 修改学生成绩 --事件委托
document.querySelector('tbody').onclick = function (e) {
    if (!e.target.classList.contains('score')) return

    // 点击td表格 插入一个input标签 (两种方法)

    // (1) innerHTML 属性插入 input  然后获取这个标签 给它注册事件
    // e.target.innerHTML = ` <input type="text" value="${e.target.innerHTML}">`
    // let input = e.target.querySelector('input')

    // (2) *推荐:更加灵活* 
    //     appendChild() 插入 input
    let input = document.createElement('input')
    input.value = e.target.innerHTML // 先把原本的值  先保存值
    e.target.innerHTML = '' // 然后把td表格的值 后清空值
    e.target.appendChild(input)

    //需求3 : 失去焦点 恢复成原值
    let num = input.value // 先把input里的值 作备份
    input.onblur = function () {
        e.target.innerText = num //失去焦点 恢复td的原值
    }
    //自动获取焦点
    input.focus()

    input.onkeyup = function (e) {
        if (e.key != 'Enter') return
        axios({
            url: '/score/entry',
            method: 'post',
            data: {
                //this.parentNode  指input的父盒子 td  (需要先在封装时 写两个自定义属性)
                //stu_id是学生的id, batch是第几次成绩
                "stu_id": this.parentNode.getAttribute('data-id'),
                "batch": this.parentNode.getAttribute('data-batch'),
                "score": this.value
            }

        }).then(({
            data: res
        }) => {
            if (res.code == 0) {
                console.log(res)
                toastr.success(res.message)
                renderScore()

            }
        })
    }
}